<template>
  <div class="ingot-analysis">
    <BasicCard style="margin-bottom: 20px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption"></BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-bottom: 20px">
      <BasicTitle :title="t('custom.千锭时断头变化趋势图')" style="padding-top: 20px"></BasicTitle>
      <div class="chart-box">
        <BrokenEndsTrendChart :valueData="valueData" :labelData="labelData"></BrokenEndsTrendChart>
      </div>
    </BasicCard>
    <BasicCard>
      <BasicVxeTable ref="gridRefDoff" v-bind="gridOptionDoff"></BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { IngotReportRowVO, DoffReportRowVO } from '../../types'
  import { IngotReportTableColumns, DoffReportTableColumns } from '../../data'
  import { postLiuTouLvList, postLuoHouDingList, postQuShiTuHttp } from '@/api/shengChanJianShi'

  import BrokenEndsTrendChart from '@/views/shengChanJianShi/businessComponents/brokenEndsTrendChart.vue'

  const { t } = useI18n()
  const gridRef = ref<BasicGridInstance>()
  const gridRefDoff = ref<BasicGridInstance>()
  const props = defineProps({
    processName: String,
    statusCode: String
  })
  // 细纱落后锭报表
  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.细纱落后锭报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `ingot-analysis-${props.statusCode}-classify`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '数据表'
    },
    maxHeight: 500,
    proxyConfig: {
      // autoLoad: false,
      // showLoading: false, // 关闭加载中
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getIngotReportList()
        }
      }
    },
    columns: IngotReportTableColumns
  })

  // 落纱留头率报表
  const gridOptionDoff = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱留头率报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `ingot-analysis-${props.statusCode}-doff`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '数据表'
    },
    maxHeight: 500,
    proxyConfig: {
      // autoLoad: false,
      // showLoading: false, // 关闭加载中
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getDoffReportList()
        }
      }
    },
    columns: DoffReportTableColumns
  })

  // 获取细纱落后锭报表数据
  const getIngotReportList = () => {
    return new Promise<IngotReportRowVO[]>((resolve) => {
      postLuoHouDingList({
        startTsid: 25070602,
        endTsid: 25070602,
        count: 50,
        condition: '0',
        machineIds: [
          '4de9c979-844d-ca98-5893-3a07f84df979',
          '5d4f3928-c1b8-4645-1636-3a07f8523dca',
          '8a961eb5-5893-ff1b-5611-3a07f8588a24',
          'ee7de5ec-780b-a6fe-8623-3a07f880f2bf',
          '746e62c5-9e87-6fcc-7ce8-3a07f88d5c1b',
          'a652f245-f572-f083-d962-3a07f88e7b06',
          '7f6ab903-a46d-3b52-4963-3a07f8988822',
          'e7af5469-8e0b-479a-5c8b-3a07f8a48024',
          'be9b5161-65cf-ef4e-2b88-3a07f8a7b7d3',
          '28b45c95-13d4-51e5-7588-3a07f8ad5dbc',
          'cbc0db09-688d-8e08-abea-3a07f8ad5f57',
          '6aae403c-f835-c392-1c9b-3a07f8ad6028',
          'e9347381-3200-d9be-36b6-3a07f8ad60de',
          '748d2d09-4331-327e-2257-3a07f8ad61f5',
          '5b810006-f207-8285-3698-3a07f8ad62cc',
          '34f9619f-e538-2177-b6b4-3a07f8b2209c',
          'd38bb447-eaeb-12b0-d9f6-3a07f8b641d4',
          'ea7d985c-132f-9183-a110-3a07f8b7a729',
          '2480aed9-1cf9-b5ff-56ce-3a07f8b7a81e',
          'b94856d3-e013-1943-df3f-3a07f8b8814c',
          'd0bbf6b1-bb86-2652-8b47-3a07f8b881a7',
          'fffab949-7f29-1cf1-ca2d-3a07f8b88204',
          '69c084e5-eed2-4622-86f9-3a07f8b882a2',
          '894ca604-9f16-dd76-d07c-3a07f8b88388',
          'bfc6b9f8-8a11-109b-33dc-3a07f8b88405',
          '2a127ad4-a809-94a9-bbcc-3a07f8b884b0',
          '62fc777c-186a-ac84-c441-3a07f8b88561',
          '8760b482-2cf9-48cf-eb73-3a07f8b88623',
          '370c05bd-5942-fd4b-55f9-3a07f8b886d5',
          '199f4c09-a55a-1ba1-3d9b-3a07f8b88724',
          '8811ef05-a41d-7d0c-2168-3a07f8b887a8',
          'a44ec50b-732a-0772-f5e0-3a07f8b88834',
          'eec6bcec-6bc1-3f37-e0a8-3a07f8b888e4',
          '327a01f0-28ef-c040-1590-3a07f8b889bb',
          'a894873d-5619-4d0e-6ecd-3a07f8b88a37',
          '173ef5db-c1bf-797e-8fbe-3a07f8b88aef',
          '2d1484b7-9516-e2e2-a1c2-3a07f8b88bc8',
          '20e33350-4ae2-cbf7-0b39-3a07f8b88c57',
          'bc502734-cc96-ad0f-0b71-3a07f8b88cf5',
          '8d6b4602-6362-5e96-dfa8-3a07f8b88daf',
          '218b5296-6c0f-2afe-6d27-3a07f8b88ec8',
          '36115ad7-9a7c-82a9-1be3-3a07f8b88f35',
          '2e31a6ee-1259-7407-b6b7-3a07f8b88f90',
          'bee9363b-cb19-d3d6-5165-3a07f8b88fd5',
          '79e7e534-0fa1-89ee-aa53-3a07f8b890b1',
          '71e5c600-1a16-96be-4f55-3a07f8b89140',
          'da365532-554a-7a64-b347-3a07f8b891d0',
          '30dc205a-ce26-05cb-9eca-3a07f8b8929e',
          '70a2ad9b-6b13-d516-7303-3a07f8b89316',
          '59e9e59d-bbc5-e555-302e-3a07f8b89364',
          '8f61247d-0050-9a18-88a3-3a07f8b893c2',
          'bc43e985-7497-7b06-4963-3a07f8b89462',
          '754ee70b-c6c8-84e5-9b50-3a07f8b894d6',
          '5f43e49e-28ef-bc1e-7ffb-3a07f8b89585',
          '06d588fa-95fb-659c-d323-3a07f8b895fe',
          '9b471bfa-2439-9661-e1b6-3a07f8b89682',
          '45e49894-fddb-cdef-d035-3a07f8b896ce',
          '04a896e4-a4df-cd50-219a-3a07f8b89837',
          'c1dea7f5-7bb9-2f6d-8f29-3a07f8b89961',
          'a4201098-81d9-50dd-5ca7-3a07f8b899e4',
          'e0651109-e8df-62b1-430a-3a07f8b89ab9',
          'e8d3c198-1deb-e042-1fcb-3a07f8b89b26',
          '0dc8d95b-5bac-c249-98d1-3a07f8b89bc7',
          'bd930dd6-74f9-1706-2700-3a07f8b89c6f',
          'f1189926-f9ca-c5bd-2d09-3a07f8b89d07',
          'e3101923-d44e-8b25-7b6d-3a07f8b89d70',
          'f7c8f304-e713-9fe2-3949-3a07f8b89dc2',
          '0d0b9ba1-5dac-683a-f8c4-3a07f8b89e3c',
          '0b8af324-c786-3e30-6c10-3a07f8b89eb5',
          'ed8aaf6c-9308-6361-798e-3a07f8b89f24',
          '077ebc91-8021-5c1b-35a3-3a07f8b8a022',
          '8bdfff33-ec51-171d-0a88-3a07f8b8a0b9'
        ]
      }).then((res: any) => {
        resolve(
          res
            .sort((a, b) => {
              return b.yarnBreakCnt - a.yarnBreakCnt
            })
            .map((value) => {
              return {
                machineNo: value.machineNo,
                sidepositionId: value.side + value.positionId,
                yarnBreakCnt: value.yarnBreakCnt,
                yarnBreakDurationTotal: Math.floor(Number(value.yarnBreakDurationTotal) / 60),
                yarnLowCnt: value.yarnLowCnt,
                yarnLowDurationTotal: Math.floor(Number(value.yarnLowDurationTotal) / 3600),
                exceptionDurationTotal: (Number(value.exceptionDurationTotal) / 3600).toFixed(2)
              }
            })
        )
      })
    })
  }

  // 获取落纱留头率报表数据
  const getDoffReportList = () => {
    return new Promise<DoffReportRowVO[]>((resolve) => {
      postLiuTouLvList({
        startTsid: 25070602,
        endTsid: 25070602,
        machineIds: [
          '4de9c979-844d-ca98-5893-3a07f84df979',
          '5d4f3928-c1b8-4645-1636-3a07f8523dca',
          '8a961eb5-5893-ff1b-5611-3a07f8588a24',
          'ee7de5ec-780b-a6fe-8623-3a07f880f2bf',
          '746e62c5-9e87-6fcc-7ce8-3a07f88d5c1b',
          'a652f245-f572-f083-d962-3a07f88e7b06',
          '7f6ab903-a46d-3b52-4963-3a07f8988822',
          'e7af5469-8e0b-479a-5c8b-3a07f8a48024',
          'be9b5161-65cf-ef4e-2b88-3a07f8a7b7d3'
        ]
      })
        .then((res: any) => {
          resolve(
            res
              .sort((a, b) => {
                return a.machineNo - b.machineNo
              })
              .forEach((value) => {
                value.startTime = dayjs(value.startTime).format('YYYY-MM-DD HH:mm:ss')
                value.endTime = dayjs(value.endTime).format('YYYY-MM-DD HH:mm:ss')
                value.duration = (value.duration / 60).toFixed(2)
                value.doffIntactRate =
                  value.doffIntactRate == null ? null : Math.round(value.doffIntactRate * 100) / 100
              })
          )
        })
        .catch((err) => {
          console.log(err)
        })
    })
  }

  // 趋势图数据获取
  const labelData = ref<any>([])
  const valueData = ref<any>([])
  const colorArr = [
    ['rgba(0, 136, 212)', 'rgba(137, 189, 27)'],
    ['rgba(219, 50, 51)', 'rgb(160,50,219)'],
    ['rgb(226,193,23)', 'rgb(226,70,23)'],
    ['rgb(23,226,196)', 'rgb(226,23,182)'],
    ['rgba(226,23,94,0.99)', 'rgba(178,130,245)'],
    ['rgb(162,241,219)', 'rgb(238,241,162)']
  ]
  const getTrendChartData = () => {
    postQuShiTuHttp({
      startTsid: 25070602,
      endTsid: 25070602,
      machineIds: ['4de9c979-844d-ca98-5893-3a07f84df979']
    }).then((res: any) => {
      res.analyParts.forEach((value, index) => {
        const baseId = `machine-${index}`
        labelData.value.push(
          { id: `${baseId}-breakage`, name: value.machineName + '(千锭时断头)' },
          { id: `${baseId}-length`, name: value.machineName + '(纺纱长度)' }
        )
      })

      res.analyParts.forEach((value, index) => {
        let itemValue = value.breakCntPerKilos.map((value1) => {
          return [value1[0], value1[1]]
        })
        let itemValue2 = value.breakCntPerKilos.map((value1) => {
          return [value1[0], value1[2]]
        })
        valueData.value.push(
          {
            name: value.machineName + '(千锭时断头)',
            type: 'line',
            yAxisIndex: 0,
            showAllSymbol: true, // 标注所有数据点,
            data: itemValue,
            connectNulls: true,
            smooth: true,
            symbolSize: 1
          },
          {
            name: value.machineName + '(纺纱长度)',
            type: 'line',
            yAxisIndex: 1,
            showAllSymbol: true, // 标注所有数据点,
            data: itemValue2,
            connectNulls: true,
            smooth: true,
            symbolSize: 1,
            itemStyle: {
              normal: {
                color: colorArr[index][0]
              }
            }
          }
        )
      })
      // this.$nextTick(function () {
      //   this.$refs.quShiTu.handleSetVisitChart();
      // })
    })
  }

  onMounted(() => {
    getTrendChartData()
    // gridRef.value?.$grid?.commitProxy('query')
    // gridRefDoff.value?.$grid?.commitProxy('query')
  })
</script>
<style scoped lang="scss">
  .chart-box {
    height: 35vh;
  }
</style>
